<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/bootstrap.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/popper.min.js"></script>
  <script src="./js/bootstrap.min.js"></script>
  <title>纯移动端1</title>
  <style>
    .z-header{
      position: relative;
      background-color: hsl(11, 100%, 95%);
      height: 200px;
    }
    .z-header::after{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: -100px;
      content: "";
      z-index: -1;
      border-radius: 0 0 50% 50%;
    }
    .pic{
      width: 80%;
      margin:auto;
      border-radius: 5%;
    }
    .dh {font-size: 2vw;}
    .dh p{
      margin: auto;
      color: #ddd;
    }
    .z-menu>li{
      width: 20%;
      font-size: 3vw;
    }
    .z-menu li>div {
      width: 10vw;
      height: 10vw;
    }
    .z-menu li:nth-child(1)>div{background-color: #e5f3ea;}
    .z-menu li:nth-child(2)>div{background-color: #ddf5f4;}
    .z-menu li:nth-child(3)>div{background-color: #ffe9e4;}
    .z-menu li:nth-child(4)>div{background-color: #fff6e4;}
    .z-menu li:nth-child(5)>div{background-color: #f1ecfc;}
    .z-menu li:nth-child(7)>div{background-color: #e5f3ea;}
    .z-menu li:nth-child(8)>div{background-color: #ddf5f4;}
    .z-menu li:nth-child(9)>div{background-color: #ffe9e4;}
    .z-menu li:nth-child(10)>div{background-color: #fff6e4;}
    .z-menu li:nth-child(6)>div{background-color: #f1ecfc;}
    .tjq-l {
      width: 54%;
      height: 40vh;
      background-image:linear-gradient(#fff,#ffe9e4);
    }
    .tjq-r {
      width: 44%;
      height: 40vh;
    }
    .t-r-1 {background-image: linear-gradient(#fff6e4,#fff);}
    .t-r-2 {background-image: linear-gradient(#ddf5f4,#f1ecfc);}
  .z-foot{height:12vh;}
  </style>
</head>
<body>
<div class="container-fluid">
    <!-- 页头 -->
    <div class="bg">  
      <div class="z-heeader">
      <input type="text" class="w-75 mt-2">
      <button class="btn ml-2 mt-2">1</button>
        <img src="./pic/扫码.png" alt="" class="mt-2">
    </div>
  </div>
    <!-- banner -->
    <div class="carousel slide" id="banner" data-ride="carousel">
      <!-- 1.图片部分展示图 -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="./pic/banner1.jpeg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="./pic/banner2.jpeg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="./pic/banner3_gaitubao_1000x680.jpeg" alt="" class="d-block w-100">
        </div>
        <div class="carousel-item">
          <img src="./pic/banner4_gaitubao_1063x798_gaitubao_1000x680.jpeg" alt="" class="d-block w-100">
        </div>
      <!-- 2.左右切换按钮 -->
      <a href="#banner" class="carousel-control-prev" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
      </a>
      <a href="#banner" class="carousel-control-next"data-slide="next">
        <span class="carousel-control-next-icon"></span>
      </a>
      <!-- 指示控制符 -->
      <ul class="carousel-indicators xz-kzf">
        <li class="active"
        data-slide-to="0"data-target="#banner"></li>
        <li data-slide-to="1"data-target="#banner"></li>
        <li data-slide-to="2"data-target="#banner"></li>
        <li data-slide-to="3"data-target="#banner"></li>
      </ul>
  </div>
  <!-- 导航栏 -->
  <div>
    <div class="d-flex mt-3 mb-3 dh">
      <p>正品保障</p>
      <p>假一罚十</p>
      <p>大众精选</p>
    </div>
  </div>
  <ul class="list-unstyled d-flex z-menu flex-wrap">
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/mbe风格_红酒.png" alt="" class="w-100"></div>
      <p class="mt-2 mb-1 text-center">入门推荐</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/啤酒.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">小酒高分</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/清酒.png" alt="" class="w-100"></div>
      <p class="mt-2 mb-1 text-center">热门榜单</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/白酒.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">新品品鉴</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/酒.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">家庭礼盒</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/酒杯 (1).png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">注册有礼</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/酒杯-香槟酒杯.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">每日特价</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/酒杯.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">品牌精选</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/酒瓶-洋酒-XO.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">限时折扣</p>
    </li>
    <li>
      <div class="rounded-circle m-auto"><img src="./pic/酒类.png" alt=""class="w-100"></div>
      <p class="mt-2 mb-1 text-center">每月上新</p>
    </li>
  </ul>
  <!-- 特价区 -->
  <div>
    <!-- left -->
    <div class="d-block tjq-l float-left ">
      <h5 class="mt-4 text-center">限时优惠</h5>
      <p class="text-center mt-4">限时限量，低价好物</p>
      <div class="倒计时">time</div>
    </div>
    <!-- right -->
    <div class="tjq-r d-block float-right">
      <div class="t-r-1 mb-1">
        <h5>小酒打卡</h5>
        <p>一点小酒，微醺一夜</p>
        <a href=""><button class="btn border ml-2 mt-1">了解一下</button></a>
      </div>
      <div class="t-r-2">
        <h5>午夜狂欢</h5>
        <p>精品原料，优质享受</p>
        <button class="btn mt-1">点击查看</button>
      </div>
    </div>
  </div>
  <!-- 页尾 -->
  <div class="fixed-bottom bg-white z-foot d-flex align-content-center">
  <div class="w-25">
    <img src="./pic/首页.png" alt="" class="w-50 d-block m-auto">
  </div>
  <div class="w-25">
    <img src="./pic/购物车空.png" alt=""class="w-50 d-block m-auto">
  </div>
  <div class="w-25">
    <img src="./pic/消息.png" alt=""class="w-50 d-block m-auto">
  </div>
  <div class="w-25">
    <img src="./pic/_我的.png" alt=""class="w-50 d-block m-auto">
    </div>
  </div>
</div>

</body>

</html>